<template>
    <admin-container title="权限分配" :loading="loading">
        <el-row>
            <!-- 左侧 -->
            <el-col :span="12">
                <div style="padding: 10px">
                    <h3 style="padding-bottom: 10px">选择权限</h3>
                    <el-table :data="policys"
                              border
                              max-height="350"
                              @row-click="onLeftRowClick"
                    >
                        <el-table-column label="策略名" prop="name"/>
                        <el-table-column label="描述" prop="text"/>
                    </el-table>
                </div>
            </el-col>

            <!-- 右侧 -->
            <el-col :span="12">
                <div style="padding: 10px">
                    <h3 style="padding-bottom: 10px">
                        已有权限
                        <small style="font-weight: 400">
                            ({{ policy_selected.length }})
                        </small>
                    </h3>
                    <el-table :data="policy_selects" border max-height="350">
                        <el-table-column label="策略名" prop="name"/>
                        <el-table-column label="描述" prop="text"/>
                        <el-table-column label="操作" width="50" align="center">
                            <template v-slot="{ row }">
                                <div class="icon_close" @click="onClickRemove(row)">
                                    <i class="el-icon-close"></i>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <div style="text-align: right">
            <el-button type="primary" @click="onSave">
                保存配置
            </el-button>
        </div>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { getPolicys } from '@/services/auth/policy.service';
import { getRolePolicy, setRolePolicy } from '@/services/auth/role.service';
@Component({
    components: { AdminContainer }
})
export default class SystemAclRoleAuth extends Vue {
    policys: any[] = [];
    policy_selected: string[] = [];
    roles: any = [];
    loading: boolean = true;

    get id(): number {
        return Number(this.$route.query.id);
    }

    get policy_selects(): any[] {
        return this.policys.filter(v => this.policy_selected.includes(v.id));
    }

    mounted() {
        this.getList()
            .finally(() => {
                this.loading = false;
            })
    }

    getList() {
        return Promise.all([
            getRolePolicy(this.id)
                .then((res: any) => {
                    this.policy_selected = res.data.list;
                }),
            getPolicys()
                .then(result => {
                    this.policys = result.data.items;
                })
        ])
    }

    /**
     * 左侧表格点击
     */
    onLeftRowClick(row: any, column: any, evt: any) {
        const idx = this.policy_selected.indexOf(row.name);
        if (idx === -1) {
            this.policy_selected.push(row.name);
        } else {
            this.policy_selected.splice(idx, 1);
        }
    }

    /**
     * 删除
     * @param row
     */
    onClickRemove(row: any) {
        const idx = this.policy_selected.indexOf(row.name);
        if (idx > -1) {
            this.policy_selected.splice(idx, 1);
        }
    }

    /**
     * 保存
     */
    onSave() {
        setRolePolicy(this.id, this.policy_selected)
            .then(() => {
                this.$message.success('保存成功');
            })
    }
}
</script>

<style scoped lang="scss">
.icon_close {
    cursor: pointer;
    color: #999;
}
</style>
